<template>
  <t-popup v-model="visible" width="528" @close="handleClose">
    <div class="ttt-picker-title">
      <t-button link @click="handleClose">
        {{ $t('index.cancel') }}
      </t-button>
      <span class="title">{{ title || $t('index.choose') }}</span>
      <t-button link type="primary" @click="handleDefine">
        {{ $t('index.define') }}
      </t-button>
    </div>
    <div v-if="visible" class="ttt-picker" ref="pickerDom">
      <div class="ttt-picker-wrapper">
        <div v-for="item in data" :key="item.value" class="ttt-picker-items"
             :class="{'ttt-picker-items-disabled': item.disabled}">
          {{ item.text }}
        </div>
      </div>
    </div>
  </t-popup>
</template>

<script setup lang="ts">
import TPopup from '../TPopup/TPopup.vue'
import TButton from '../TButton/TButton.vue'
import BScroll from '@better-scroll/core'
import Wheel from '@better-scroll/wheel'
import { nextTick, onBeforeUnmount, ref, watch } from 'vue'
import type { PropType } from 'vue'
import type { TPickerData, TPickerDataValue } from '../types/components'

BScroll.use(Wheel)

const emits = defineEmits<{
  (e: 'update:visible', value: boolean): void
  (e: 'define', value: string | number | { value: TPickerDataValue; [key: string]: unknown }): void
  (e: 'update:modelValue', value: string | number | { value: TPickerDataValue; [key: string]: unknown }): void
}>()

const props = defineProps({
  // 弹窗显示
  visible: {
    type: Boolean as PropType<boolean>,
    required: true,
    default: false
  },
  // 绑定数据 可以设置默认值
  modelValue: {
    type: [String, Number, Object] as PropType<string | number | { value: TPickerDataValue; [key: string]: unknown }>,
    required: true,
    default: ''
  },
  // 滚动数据
  data: {
    type: Array as PropType<TPickerData[]>,
    required: true,
    default: () => []
  },
  // 标题
  title: {
    type: String as PropType<string>,
    default: ''
  }
})

// 滚动DOM
const pickerDom = ref()
// 当前选择索引
const selectedIndex = ref<number>(0)
// 当前弹窗显示
const visible = ref<boolean>(props.visible)
// 滚动插件
const pickerScroll = ref<BScroll>()

// 初始化滚动插件
const initPicker = async () => {
  await nextTick()
  if (!pickerDom.value) return
  selectedIndex.value = props.data.findIndex(item => {
    if (typeof props.modelValue === 'object') {
      return item.value === props.modelValue.value
    } else {
      return item.value === props.modelValue
    }
  })
  if (pickerScroll.value) return
  pickerScroll.value = new BScroll(pickerDom.value, {
    wheel: {
      selectedIndex: selectedIndex.value,
      wheelWrapperClass: 'ttt-picker-wrapper',
      wheelItemClass: 'ttt-picker-items',
      wheelDisabledItemClass: 'ttt-picker-items-disabled'
    },
    resizePolling: 300,
    useTransition: false,
    probeType: 3
  })
}

// 关闭事件
const handleClose = () => {
  emits('update:visible', false)
}

// 确定事件
const handleDefine = () => {
  const index = pickerScroll.value?.getSelectedIndex()
  if (index < 0) return
  if (typeof props.modelValue === 'object') {
    emits('update:modelValue', props.data[index])
    emits('define', props.data[index])
  } else {
    emits('update:modelValue', props.data[index].value)
    emits('define', props.data[index].value)
  }
  emits('update:visible', false)
}

watch(() => props.visible, (val: boolean) => {
  visible.value = val
  if (val) initPicker()
})

onBeforeUnmount(() => {
  pickerScroll.value?.restorePosition()
  pickerScroll.value?.destroy()
})
</script>

<style scoped lang="scss">
.ttt-picker-title {
  height: 88rem;
  display: flex;
  align-items: center;
  justify-content: space-between;

  > .title {
    display: inline-block;
    max-width: 50vw;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}

.ttt-picker {
  height: 264rem;
  padding-top: 178rem;
  overflow: hidden;
  position: relative;

  &::before, &::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1rem;
    background-color: var(--theme-border-disabled-color);
  }

  &::before {
    top: 176rem;
  }

  &::after {
    top: 264rem;
  }

  .ttt-picker-wrapper {
    .ttt-picker-items {
      width: 100%;
      font-size: 28rem;
      height: 88rem;
      display: flex;
      justify-content: center;
      align-items: center;

      &.ttt-picker-items-disabled {
        color: var(--font-disabled);
      }
    }
  }
}
</style>
